<template>
  <el-form
    label-position="top"
    :model="state.addForm"
    :rules="rules"
    ref="addFormRef"
  >
    <el-form-item :label="$t('付款人姓名')" prop="name">
      <el-input
        v-model="state.addForm.name"
        :placeholder="$t('请输入付款人姓名')"
      >
      </el-input>
    </el-form-item>
    <el-form-item :label="$t('付款人邮箱')" prop="email">
      <el-input
        v-model="state.addForm.email"
        :placeholder="$t('请输入付款人邮箱')"
      >
      </el-input>
    </el-form-item>
    <el-form-item :label="$t('付款人手机号')" prop="phone">
      <el-input
        v-model="state.addForm.phone"
        :placeholder="$t('请输入付款人手机号')"
        type="number"
        class="customInput"
      >
        <template #prepend>
          <el-input
            class="customInputWrap"
            v-model="state.addForm.area_code"
            :placeholder="$t('区号')"
            style="width: 80px"
            min="0"
            type="number"
          >
          </el-input>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item :label="$t('付款人国家')" prop="country">
      <el-select
        v-model="state.addForm.country"
        style="width: 100%"
        :placeholder="$t('请选择付款人国家')"
      >
        <el-option
          v-for="item in state.countryList"
          :key="item.jc"
          :label="item.country"
          :value="item.jc"
        />
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('付款人城市')" prop="city">
      <el-input
        v-model="state.addForm.city"
        :placeholder="$t('请输入付款人城市')"
      >
      </el-input>
    </el-form-item>
    <el-form-item :label="$t('付款人地址')" prop="address">
      <el-input
        v-model="state.addForm.address"
        :placeholder="$t('请输入付款人地址')"
      >
      </el-input>
    </el-form-item>
    <el-form-item>
      <div class="flex justify-center w-full">
        <el-button
          @click="createPayer(addFormRef)"
          type="danger"
          class="h-10 plainButton w-36"
        >
          {{ $t("添加") }}
        </el-button>
      </div>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ref, reactive } from "vue";
import { GetPhoneAreaCode, AddVAPayer } from "@/api/VAAccount";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps({
  isShowAddPayer: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["closeAddPayer"]);

const state = reactive({
  addForm: {},
  countryList: [],
});

const checkEmail = (rule, value, callback) => {
  if (!value) {
    return callback(new Error(t("邮箱不能为空")));
  } else {
    const emailRegExp =
      /^([a-zA-Z0-9_\.-]+)@([\da-zA-Z\.-]+)\.([a-zA-Z\.]{2,6})$/;
    if (emailRegExp.test(value)) {
      callback();
    } else {
      return callback(new Error(t("请输入正确的邮箱")));
    }
  }
};

const rules = reactive({
  name: [
    {
      required: true,
      message: t("请输入付款人姓名"),
      trigger: "change",
    },
  ],
  email: [
    {
      required: true,
      message: t("请输入付款人邮箱"),
      trigger: "change",
    },
    { validator: checkEmail, trigger: "change" },
  ],
  phone: [
    {
      required: true,
      message: t("请输入付款人手机号"),
      trigger: "change",
    },
    { min: 6, max: 16, message: t("请输入6-16位的数字"), trigger: "change" },
  ],
  address: [
    {
      required: true,
      message: t("请输入付款人地址"),
      trigger: "change",
    },
  ],
  city: [
    {
      required: true,
      message: t("请输入付款人城市"),
      trigger: "change",
    },
  ],
  country: [
    {
      required: true,
      message: t("请选择付款人国家"),
      trigger: "change",
    },
  ],
});

const addFormRef = ref();

const createPayer = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      try {
        if (!state.addForm.area_code) {
          ElMessage.success(t("请填写区号"));
        } else {
          const data = await AddVAPayer(state.addForm);
          if (data) {
            ElMessage.success(t("添加成功"));
            state.addForm = {};
            emit("closeAddPayer", data.payer_id);
          }
        }
      } catch {}
    }
  });
};

const getPhoneAreaCode = async () => {
  try {
    const data = await GetPhoneAreaCode();
    state.countryList = data || [];
  } catch {}
};

if (props.isShowAddPayer) {
  getPhoneAreaCode();
}
</script>
